<script setup>
import { onMounted, ref } from "vue";
import axios from "@/axios";
import { ElMessage } from "element-plus";

const searchForm = ref({
  name: '',
  certId: '',
  department: '',
});

const doctorArr = ref([]);
const introductionViewShow = ref(false);
const currentIntroduction = ref('');

const resetSearch = () => {
  searchForm.value = {
    name: "",
    certId: "",
    department: "",
  };
};

const selectDoctor = () => {
  axios.get("/docker/list", { params: searchForm.value }).then((response) => {
    if (response.data.code === 200) {
      ElMessage.success('查询成功');
      doctorArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.message);
    }
  });
};

const showIntroduction = (text) => {
  if (text) {
    currentIntroduction.value = text;
    introductionViewShow.value = true;
  } else {
    ElMessage.info('该医生暂无简介');
  }
};

onMounted(() => {
  selectDoctor();
});
</script>

<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">医生管理</span>
  </div>
  <!-- 医生数据搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="医生姓名">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchForm.name"
                  @keydown.enter="selectDoctor"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchForm.certId"
                  @keydown.enter="selectDoctor"></el-input>
      </el-form-item>
      <el-form-item label="科室">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchForm.department"
                  @keydown.enter="selectDoctor"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectDoctor">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 医生数据展示 -->
  <el-card style="margin:20px;">
    <el-table :data="doctorArr" border stripe style="width: 100%">
      <el-table-column prop="name" label="医生姓名" width="180"></el-table-column>
      <el-table-column prop="certId" label="身份证号" width="180"></el-table-column>
      <el-table-column prop="sex" label="性别" width="180">
        <template #default="scope">
          <span>{{ scope.row.sex === 1 ? '女' : '男' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="department" label="科室" width="180"></el-table-column>
      <el-table-column prop="expert" label="职称" width="180">
        <template #default="scope">
          <span>{{ scope.row.expert === 0 ? '主任医师' : '副主任医师' }}</span>
        </template>
      </el-table-column>
      <!-- 查看简介按钮 -->
      <el-table-column label="简介" width="180">
        <template #default="scope">
          <el-button type="primary" @click="showIntroduction(scope.row.text)">查看简介</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 简介对话框 -->
  <el-dialog title="医生简介" v-model="introductionViewShow" width="50%">
    <div style="padding: 20px;">
      {{ currentIntroduction }}
    </div>
  </el-dialog>
</template>

<style scoped>

</style>